<template>
  <div class="message">
    <div class="message-header">约课记录</div>
    <!-- <h2>资讯</h2> -->
    <van-tabs v-model="active" title-active-color="#EB6100" @click="onClick">
      <van-tab title="待上课">
        <div class="image">
          <img src="../../../public/no-message.8d3ca5af.png" />
          <p>还没有待上课记录哦</p>
          <van-button color="#EB6100">立即约课</van-button>
        </div>
      </van-tab>
      <van-tab title="已上课"
        ><div class="image">
          <img src="../../../public/no-message.8d3ca5af.png" />
          <p>还没有上课记录哦</p>
          <van-button color="#EB6100">立即约课</van-button>
        </div></van-tab
      >
      <van-tab title="已取消">
        <div class="image">
          <img src="../../../public/no-message.8d3ca5af.png" />
          <p>还没有取消上课记录哦</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      list: [],
    };
  },
  mounted() {
    this.getmyInviteCourse()
  },
  methods: {
    onClick() {
      this.getmyInviteCourse()
    },
    getmyInviteCourse() {
      this.$API
        .myInviteCourse({ page: 2, limit: 10, type: this.active + 1 })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>
<style lang="scss">
.message {
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
}
.message-header {
  width: 100%;
  height: 1.4rem;
  line-height: 1.4rem;
  font-size: 0.6rem;
  text-align: center;
  background-color: white;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}
.image {
  width: 94%;
  margin: 2rem auto 0;
  text-align: center;
  img {
    width: 70%;
    display: block;
    margin: 0 auto;
  }
  p {
    margin-bottom: 30px;
    font-size: 0.4rem;
    color: #b7b7b7;
  }
}
</style>